<template>
    <div class="classification">
        <div class="kindList" ref="kindList" v-show="loadingFlat">
            <div class="showKind">
                <div class="control" ref="control">
                    <ul>
                        <li :class="selectLabel.style_id == item.id ? 'active' : ''" @click="(selectLabel.style_id = item.id), changeSelect()" v-for="item in styles" :key="item.id">
                            {{ item.name }}
                        </li>
                    </ul>
                    <ul>
                        <li :class="selectLabel.area_id == item.id ? 'active' : ''" @click="(selectLabel.area_id = item.id), changeSelect()" v-for="item in areas" :key="item.id">{{ item.name }}</li>
                    </ul>
                    <ul>
                        <li :class="selectLabel.is_free == item.id ? 'active' : ''" @click="(selectLabel.is_free = item.id), changeSelect()" v-for="item in prices" :key="item.id">{{ item.name }}</li>
                    </ul>
                    <ul>
                        <li :class="selectLabel.is_finish == item.id ? 'active' : ''" @click="(selectLabel.is_finish = item.id), changeSelect()" v-for="item in status" :key="item.id">
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="popularRecom">
                <div class="ordersItem">
                    <span :class="selectLabel.order == item.id ? 'active' : ''" @click="(selectLabel.order = item.id), changeSelect()" v-for="item in orders" :key="item.id">{{ item.name }}</span>
                </div>
                <span class="choose" @click="flat = !flat"><van-icon :name="flat == true ? 'arrow-down' : 'arrow-up'" />筛选</span>
            </div>
        </div>
        <loading v-show="!loadingFlat"></loading>
        <itemTabVue :selectLabelArr="selectLabelArr"></itemTabVue>
    </div>
</template>

<script>
import itemTabVue from "../../components/itemTabList.vue";
import { kindCondition, classPage } from "../../request/index";
import loading from "@/components/loading.vue";
export default {
    name: "classification",
    components: {
        itemTabVue,
        loading,
    },

    data() {
        return {
            selectLabel: {
                style_id: -1,
                area_id: -1,
                order: 0,
                is_free: -1,
                is_finish: -1,
                page_num: 1,
                page_size: 15,
            },
            loadingFlat: false,
            areas: [],
            orders: [],
            prices: [],
            status: [],
            styles: [],
            flat: false,
            selectLabelArr: [],
        };
    },
    watch: {
        flat(newVal, oldVal) {
            if (newVal) {
                this.$refs.control.style.height = "5.1rem";
                this.$refs.kindList.style.height = "5.96rem";
            } else {
                this.$refs.control.style.height = "2.56rem";
                this.$refs.kindList.style.height = "3.4133rem";
                // 3.4133rem
            }
        },
    },
    methods: {
        getKindItem() {
            kindCondition()
                .then((data) => {
                    this.areas = data.data.areas;
                    this.areas.unshift({ id: -1, name: "全部" });
                    this.orders = data.data.orders;
                    this.prices = data.data.prices;
                    this.prices.unshift({ id: -1, name: "全部" });
                    this.status = data.data.status;
                    this.status.unshift({ id: -1, name: "全部" });
                    this.styles = data.data.styles;
                    this.styles.unshift({ id: -1, name: "全部" });
                    return this.styles;
                })
                .then((content) => {
                    this.loadingFlat = true;
                });
        },

        getItemTab() {
            classPage(this.selectLabel).then((data) => {
                this.selectLabelArr = data.data;
            });
        },
        changeSelect() {
            this.getItemTab();
        },
    },

    created() {
        this.getKindItem();
        this.getItemTab();
    },
};
</script>

<style lang="scss">
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";
.classification {
    box-sizing: border-box;
    width: 100%;
    // background: $bgColor;
    .kindList {
        padding: 0 0.4267rem;
        padding-top: 0.2667rem;

        height: 3.4133rem;
        background-color: white;
        transition: 0.3s;

        .showKind {
            .control {
                height: 2.56rem;
                overflow: hidden;
                transition: 0.3s;

                ul {
                    // height: 2.56rem;
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 0.32rem;
                    &:nth-child(1) {
                        border-bottom: 1px solid whitesmoke;
                    }
                    li {
                        margin: 0.16rem 0;

                        padding: 2px 10px;
                        height: 0.4267rem;
                        min-width: 0.64rem;
                        line-height: 0.4267rem;
                        &.active {
                            color: $activeColor;
                        }
                    }
                }
            }
        }
        .popularRecom {
            height: 3.4133rem-2.56rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .ordersItem {
                display: flex;
                align-items: center;
            }
            span {
                margin: 0;
                font-size: 0.32rem;
                padding: 2px 10px;
                height: 0.4267rem;
                min-width: 0.64rem;
                line-height: 0.4267rem;

                &.active {
                    color: $activeColor;
                }
            }
        }
    }
}
</style>
